<template>
  <div>
    <!-- 顶部logo -->
    <van-nav-bar style="background-color: #f5f5f5">
      <template #left>
        <van-image width="40vw" src="/logo.png" />
      </template>
      <template #right>
        <van-icon color="#5e5e5e" size="1.5em" name="search" />
        <span class="client" style="font-size: 0.9em">客户端</span>
      </template>
    </van-nav-bar>
    <!-- 标签页 -->
    <van-tabs v-model="activeName" line-width="0" swipeable background="#333" title-active-color="#fff" title-inactive-color="#a1a1a1">
      <van-tab title="首页" name="index"><index /> </van-tab>
      <van-tab title="分类" name="category">内容 2</van-tab>
      <van-tab title="排行" name="toplist">内容 3</van-tab>
      <van-tab title="书架" name="shelf">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Index from './components/Index.vue'
export default {
  components: { Index },
  data() {
    return {
      activeName: 'index',
    }
  },
}
</script>

<style lang="scss" scoped>
.client {
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #d3d3d3;
  color: #666;
  font-size: 14px;
  box-sizing: border-box;
}
</style>
